<template>
    <div id="home">
        <h2>{{msg}}</h2>
        <ul>
            <li v-for="(item,key) in list">
                <!-- 路由基础演示 -->
                <!-- <router-link to="/content/123">{{key}}---{{item}}</router-link> -->

                 <!-- 获取请求的参数-Get传值 -->
                <router-link :to="'/productDetail?aid='+key">{{key}}---{{item}}</router-link>
            </li>
        </ul>

        <!-- 编程式路由(通过js跳转))演示 -->
        <button @click="goNews()">通过js跳转到新闻页面</button>
      
    </div>
</template>

<script>


export default {
    data(){
        return{
            msg:'我是一个Home组件',
            list:['商品1','商品2','商品3']
        }
    },
    methods:{
        goNews(){
            // 编程式路由: 第一种跳转方式
            // this.$router.push({path:'news'});
            // this.$router.push({path:'/newsDetail/495'});

            // 编程式路由: 第二种跳转方式-命名路由
            this.$router.push({name:'newsName'});

        }
    },
    components:{

    },
    mounted(){

    }
}
</script>

